<template>
    <el-form-item class="xFwordProps">
        <div class="file-list" v-if="tempValue" v-for="(item, index) in tempValue" :key="index" @mouseenter="showId = item.id" @mouseleave="showId = 0">
            <div class="item" :style="getStyle(item.cover, 3)">
                <div
                    style="background-color: rgba(0,0,0,.6); height: 20px; line-height: 20px; width: 100%; color: white; bottom: 0px; left: 0px; font-size: 12px; position: absolute;"
                >
                    {{ item.fileName }}
                </div>
                <div class="tool-list" v-show="item.id === showId"><i class="iconfont icon-delete" @click="del(index)"></i></div>
            </div>
        </div>
        <add-assets @before-open="_beforeOpen" :size="{ height: 140 }" />
    </el-form-item>
</template>

<script>
import AddAssets from '@/components/program-editor/add-assets';
import uploadMixin from '@/mixins/assets-upload-mixin';
import { mapActions } from 'vuex';
export default {
    name: 'attr-sxc-docSrcList',
    components: {
        AddAssets
    },
    props: {
        docSrcList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            tempValue: [],
            showId: 0
        };
    },
    watch: {
        docSrcList(v1, v2) {
            if (JSON.stringify(v1) === JSON.stringify(v2)) {
                return;
            }
            this.initData();
        },
        tempValue:{
            deep: true,
            immediate: true,
            handler(val){
                val.forEach((item,index)=>{
                    // if(item.cid=='3'){
                        let fileFormat = item.name.split('.')[1];//截
                        switch(fileFormat){
                            case '.doc':
                                item.cover = './static/pic/doc.png';
                                break;
                            case 'docx':
                                item.cover = './static/pic/docx.png';
                                break;
                            case 'pdf':
                                item.cover = './static/pic/pdf.png';
                                break;
                            case 'ppt':
                                item.cover = './static/pic/ppt.png';
                                break;
                            case 'pptx':
                                item.cover = './static/pic/pptx.png';
                                break;
                            case 'rtf':
                                item.cover = './static/pic/rtf.png';
                                break;
                            case 'txt':
                                item.cover = './static/pic/txt.png';
                                break;
                            case 'xls':
                                item.cover = './static/pic/xls.png';
                                break;
                            case 'xlsx':
                                item.cover = './static/pic/xlsx.png';
                                break;
                        }
                    // }
                    console.log(item);
                }),
                this.change();
            }
        }
    },
    mixins: [uploadMixin],
    created() {
        this.initData();
    },
    methods: {
        ...mapActions('programs', ['deleteElment']),
        initData() {
            let list = [];
            this.docSrcList.forEach(item => {
                list.push(item);
            });
            this.tempValue = list;
        },
        getResultList() {
            let list = [];
            for (let i = 0, len = this.tempValue.length; i < len; i++) {
                list.push(this.tempValue[i]);
            }
            return list;
        },
        change() {
            this.$emit('update:docSrcList', this.getResultList());
        },
        del(index) {
            this['deleteElment']();
        },
        _beforeOpen() {
            this.beforeOpen({
                cid: 3,
                limit: 1,
                propName: {
                    propsValue: 'docSrcList'
                },
                selected: [...this.docSrcList]
            });
        }
    }
};
</script>

<style lang="scss" scoped></style>
